<template>
    <div class="steps-root" v-loading="loading">
        <el-steps v-if="logList && logList.length > 0" :active="activeValue" direction="vertical" align-center
            style="height: 500px" finish-status="success">
            <el-step v-for="(item, idx) in logList" :key="idx" :title="item.name">
                <template #description>
                    <div class="item">
                        <div>时间： {{ item.createTime || '' }}</div>
                        <div>处理人：{{ item.nickname || '' }}</div>
                        <div>备注： {{ item.description || '' }}</div>
                    </div>
                </template>
            </el-step>
        </el-steps>

        <div v-else class="no-data">
            <div>
                <el-icon size="70" color="#bbb">
                    <DataLine />
                </el-icon>
            </div>
            <div class="txt">暂无数据</div>
        </div>
    </div>
</template>

<script setup>
import {
    apiGetOpHistory,
} from "@/api/common";

const activeValue = ref(1)
const logList = ref([])
const loading = ref(false)

const props = defineProps({
    productId: {
        type: Number,
        defautl: -1
    },
    checkNo: {
        type: String,
        defautl: ''
    },
});

watch(() => props.productId, value => {
    setList()
})

const setList = () => {
    if (props.productId && props.checkNo) {
        loading.value = true
        apiGetOpHistory({
            "productId": props.productId,
            "checkNo": props.checkNo
        }).then(res => {
            loading.value = false
            if (res && res.data) {
                logList.value = res.data
                activeValue.value = logList.value.length
            }
        })
    }
}

setList()

</script>

<style lang="scss" scoped>
.steps-root {
    padding: 20px 100px;
    overflow-y: auto;
    margin: 20px 0;
    cursor: pointer;

    .item {
        min-width: 200px;
        margin: 5px 0;
        padding: 10px;
        border-radius: 4px;
        font-size: 14px;
        color: #666 !important;

        div {
            margin: 5px 0;
        }

        &:hover {
            background-color: #f8f8f8;
        }
    }

    .no-data {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #666;
        font-size: 15px;
        text-align: center;

        .txt {
            margin-top: 30px;
        }
    }
}
</style>